<template>
    <div class="_switchbutton">
        <input @click="changeStatu" id="kg" type="checkbox">
        <div class="_switchicon">
            <div class="_iconbox">
                <div class="_cir"></div>
                <div class="_hh"></div>
            </div>
        </div>
    </div>
</template>

<script setup> 
const emit = defineEmits(['change']);
let changeStatu = () => {
    let value = document.getElementById('kg').value
    emit('change', value)
}
</script>

<style lang="scss" scoped>
._switchbutton {
    width: 120px;
    height: 60px;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    #kg {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        position: absolute;
        z-index: 1111;
        width: 50px;
        height: 50px;
        left: 30px;
        transform: translateX(-50%);
        transition: left 0.5s ease;
        &:checked {
            left: 90px;
        }
        &:checked ~ ._switchicon {
            left: 60px;
            ._iconbox {
                ._cir {
                    border: 3px solid rgb(30, 237, 82) !important;
                }
                ._hh {
                    background-color: rgb(30, 237, 82) !important;
                }
            }
        }
    }
    &::before {
        content: "";
        position: absolute;
        width: 60%;
        border-radius: 4px;
        height: 4px;
        background-color: #444;
    }
    ._switchicon {
        height: 100%;
        width: 60px;
        position: absolute;
        left: 0;
        transition: left 0.5s ease;
        &::before,
        &::after {
            content: "";
            top: 0;
            width: 10px;
            height: 100%;
            position: absolute;
            filter: blur(1px);
        }
        &::before {
            left: 0;
            background: linear-gradient(rgb(241, 239, 239), #e3e3e3);
        }
        &::after {
            right: 0;
            background: #9d9d9d;
        }
        ._iconbox {
            left: 5px;
            width: 90%;
            height: 100%;
            background: linear-gradient(#dbdae1, #a3aaba);
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1),
                15px 15px 15px rgba(0, 0, 0, 0.1),
                20px 20px 20px rgba(0, 0, 0, 0.1),
                // 30px 30px 30px rgba(0, 0, 0, 0.1),
                inset 1px 1px 2px #fff;
            position: relative;
            ._cir {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 17px;
                height: 17px;
                background-color: transparent;
                clip-path: polygon(
                    50% 50%,
                    65% 0%,
                    100% 0%,
                    100% 100%,
                    0% 100%,
                    0% 0%,
                    35% 0%
                );
                border-radius: 50%;
                border: 3px solid rgb(114, 113, 113);
            }
            ._hh {
                height: 13px;
                width: 2px;
                border-radius: 3px;
                background-color: rgb(114, 113, 113);
                position: absolute;
                left: 50%;
                top: 16px;
                transform: translateX(-50%);
            }
        }
    }
}
@media screen and (max-width: 461px) {
    ._switchbutton {
        transform: scale(0.6);
    }
}
</style>